import { Avatar, Row, Col, Tag } from 'antd'
import styles from './HomeContentInfo.less'
import type { IHomeContentInfo } from '../../../data';
const HomeContentInfo = (props: IHomeContentInfo) => {
  const { desc, type } = props
  // 注意内容判空
  const judgeSubTitle = (item: any, subItem: any, subIndex: number) => {
    let title
    if (item.title === '节电小区') {
      const res = subItem.title && subItem.title.split('/')
      console.log(res);
      title =  (
        <>
          <span style={{ fontWeight: 600, fontSize: '22px' }}>{subItem.title ? res[0] : '-'} </span>
          <span>/</span>
          <span style={{ fontWeight: 600, fontSize: '16px' }}>{subItem.title ? res[1] : '-'} </span>
          <span>/</span>
          <span style={{ fontWeight: 600, fontSize: '16px' }}>{subItem.title ? res[2] : '-'} </span>
        </>
      )
    } else if (item.title === '策略统计' && subIndex === 1) {
      const res = subItem.title && subItem.title.split('/')
      title =  (
        <>
          <span style={{ fontWeight: 600, fontSize: '22px' }}>{subItem.title ? res[0] : '-'}</span>
          <span>/</span>
          <span style={{ fontWeight: 600, fontSize: '16px' }}>{subItem.title ? res[1] : '-'} </span>
        </>
      )
    } else if (item.title === '数据' && subIndex === 0) {
      title =  (
        <>
          <div style={{display: 'flex', alignItems: 'center'}}>
            <span style={{ fontWeight: 600, fontSize: '22px' }}>{subItem.title ? subItem.title : '-'}</span>
            {subItem.title ? <Tag color="success" style={{ marginLeft: '10px' }}>正常</Tag> : '/-'}
          </div>
        </>
      )
    } else {
      title =  <span style={{fontWeight: 600, fontSize: '22px'}}>{subItem.title ? subItem.title : '-'}</span>
    }
    return title
  }
  return (
    <>
      <Row>
        {
          desc.map(item => {
            return <Col span={type === '配置中心' ? 8 : 12} key={item.title}>
              <div className={styles.pageHeaderContent}>
                    <div className={styles.avatar}>
                      <Avatar shape="square" size="large" src={item.icon} />
                    </div>
                    <div className={styles.content}>
                      
                      <span className={styles.contentTitle}>{item.title}</span>
                      {
                        item.data.map((subItem: any, subIndex: number) => {
                          return (<div key={ subItem.id } className={styles.descBox}>
                              <div>
                                {
                                  judgeSubTitle(item, subItem, subIndex)
                                }
                              </div>
                              <div>
                                <span style={{color: '#D0CBCD', fontSize: '12px'}}>{subItem.content}</span>
                              </div>
                          </div>)
                        })
                      }
                    </div>
              </div>
            </Col>
          })
        }
      </Row>
    </>
    
  );
};
export default HomeContentInfo